<script lang="ts" setup>
import { reactive } from 'vue';
import { useBoolean } from '@sa/hooks';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import Title from '@/components/common/login/auth-title.vue';

defineOptions({ name: 'ForgetPassword' });

interface Emit {
  (event: 'changeModule', module: UnionKey.LoginModule): void;
}
const emit = defineEmits<Emit>();

const { formRef, validate } = useNaiveForm();
const { bool: loading, setBool: setLoading } = useBoolean();

interface FormModel {
  email: string;
}

const model: FormModel = reactive({
  email: ''
});

const { formRules } = useFormRules();
type RuleKey = Extract<keyof FormModel, 'email'>;

const rules: Record<RuleKey, CommonType.WithArray<App.Global.FormRule>> = {
  email: formRules.email
};

async function handleSubmit() {
  await validate();
  setLoading(false);
}
</script>

<template>
  <div @keydown.enter.prevent="handleSubmit">
    <Title title="忘记密码 🤦🏻‍♂️">
      <template #desc>
        <slot name="subTitle">输入您的电子邮件，我们将向您发送重置密码的链接</slot>
      </template>
    </Title>

    <NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
      <NFormItem path="email" class="relative">
        <NInput v-model:value="model.email" placeholder="example@example.com" />
      </NFormItem>
    </NForm>

    <NSpace :size="16" vertical>
      <NButton type="primary" block :loading="loading" @click="handleSubmit">发送重置链接</NButton>
      <NButton block @click="emit('changeModule', 'pwd-login')">返回</NButton>
    </NSpace>
  </div>
</template>
